<template>
    <el-tabs model-value="cms">
        <el-tab-pane label="内容设置" name="cms">
            <el-form label-width="90px" class="cms_box">
                <el-form-item label="模板标题">
                    <mi-input v-model="page.info.title"/>
                </el-form-item>
                <el-form-item label="页面标题">
                    <mi-input v-model="page.info.content.title"/>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="style">
            <el-form label-width="90px" class="style_box">
                <el-form-item label="页面背景色">
                    <el-color-picker v-model="page.info.content.background" />
                </el-form-item>
                <el-form-item label="页面背景图">
                    <mi-up-image v-model="page.info.content.background_image" />
                </el-form-item>
                <el-form-item label="导航栏类型">
                    <mi-radio v-model="page.info.content.navbar_type" :options="[{id:1,title:'常规'},{id:2,title:'滚动渐变'}]" />
                </el-form-item>
                <el-form-item label="导航栏背景">
                    <el-color-picker v-model="page.info.content.navbar_background" />
                    <mi-form-aux>如果导航栏类型为“滚动渐变”，初始背景为透明，当页面滚动时背景色生效</mi-form-aux>
                </el-form-item>
                <el-form-item label="显示标题">
                    <mi-radio v-model="page.info.content.show_title"/>
                </el-form-item>
                <el-form-item label="标题颜色">
                    <el-color-picker v-model="page.info.content.title_color"/>
                </el-form-item>
                <el-form-item label="底部导航">
                    <mi-radio v-model="page.info.content.show_tab_bar"/>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">

import {inject} from "vue";


const page : any = inject("page")

</script>

<style scoped lang="scss">
.cms_box{
    padding: 10px;
    label{
        width: 32px;
    }
}
.style_box{
    padding: 10px;
    .el-input-number{
        width: 100% !important;
    }
    .el-row{
        width: 100%;
    }
}
</style>
